<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我的购物车</title>
  <link rel="stylesheet" href="../styles/taobao.css">
  <link rel="stylesheet" href="../styles/shop.css">
  <link rel="Shortcut Icon" href="/front/favicon.ico">
  <link rel="stylesheet" href="/front/plugins/element-ui/index.css">
</head>
<body class="cart-taobao cart-lang-zh_CN">
<div class="middle-left">
</div>
<div class="middle-right">
  <div class="J_Toolkit">
    <div class="gw-toolkit">
      <div class="gw-toolkit-list">
        <div class="im-entry">
          <div class="im-top">
            <img src="../images/xiaoxi.png" class="im-icon" alt="">
          </div>
          <div class="im-bottom">消息</div>
        </div>
        <div class="toolkit-item toolkit-item-link">
          <a href="">
            <i class="toolkit-icon" style="background-image: url(../images/kefu.png)">
            </i>
            官方客服
          </a>
        </div>
        <div class="toolkit-item toolkit-item-link">
          <a href="">
            <i class="toolkit-icon" style="background-image: url(../images/反馈.png)">
            </i>
            反馈
          </a>
        </div>
        <div class="toolkit-item toolkit-item-link">
          <a href="">
            <i class="toolkit-icon" style="background-image: url(../images/jubao.png)">
            </i>
            举报
          </a>
        </div>

      </div>
    </div>
  </div>
</div>
<div class="middle-center" id="app">
  <el-dialog
          title="支付信息"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
    <div style="margin: 10px;color: red;">请核对您的订单信息</div>
    <span style="margin: 10px;">收货地址：</span>
    <el-select v-model="nowAddress" placeholder="请选择">
      <el-option
              v-for="item in addresses"
              :key="item.index"
              :label="item.value"
              :value="item.value">
      </el-option>
    </el-select>
    <el-button @click="addNewAddress()" size="small" round>添加新地址</el-button>
    <div style="margin: 10px;">订单信息</div>
    <div style="margin: 10px;" v-for="item in multipleSelection">
      <div style="display: flex;flex-direction: row;width:100%;border-radius: 10px;background-color: rgb(247,249,250)">
        <a :href="'page/goods_detail.html?id=' + item.id">
          <div style="height: 100px;width: 100px;display: flex;
        align-items: center;
        justify-content: center;margin-left: 5px;margin-top: 5px;border:2px solid #f6f6f6;">
            <img :src="baseurl+item.image"
                 style="height: 95px;width: 95px;border: black 3px;border-radius: 10px;margin-right: 5px">
          </div>
        </a>
        <div style="height: 100px;width: 350px;margin-top: 5px;border:2px solid #f6f6f6;">
          <!--       <div style="height: 30px;">
                   <span>收货人：{{item.goodsName}}</span>
                 </div>-->
          <div style="height: 70px;">{{item.name}}</div>
        </div>
        <div style="height: 100px; width: 50px;display: flex;
        align-items: center;
        justify-content: center;border:2px solid #f6f6f6;">
          <span>{{item.amount}}件</span>
        </div>
        <div style="height: 100px;width: 50px;display: flex;
        align-items: center;
        justify-content: center;border:2px solid #f6f6f6;">
          <span>{{item.price}}</span>
        </div>
      </div>
    </div>
    <span style="margin: 10px;font-size: 20px;">总金额：</span>
    <strong><span style="margin: 10px;font-size: 20px;">{{nowPrice}}</span></strong>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose()">取 消</el-button>
      <el-button type="primary" @click="buyNow()">立即支付</el-button>
    </span>
  </el-dialog>
  <!--        顶上的购物服务栏-->
  <div class="top">
    <div class="top-box">
      <div class="top-wrap clearfix">
        <!-- 左边的标志-->
        <div class="top-box-left">
          <a href="/front/index.html" role="img" class="logo-bd clearfix">
            <div class="logo">
              <h1 href="/front/index.html">
              </h1>
            </div>
          </a>
        </div>
        <!-- 中间的搜索框-->
        <div class="top-box-center">
          <div class="search-wrap">
            <div class="search-bd search-suggest search-suggest-group" id="J_Search">
              <div data-sg-type="tab">
                <ul class="search-suggest-tabs">
                  <li class="search-suggest-tabs-tab selected" data-value="item" name="宝贝">
                    宝贝
                    <div class="search-tab-icon">
                      <i>
                        <em></em>
                        <span></span>
                      </i>
                    </div>
                  </li>
                  <li class="search-suggest-tabs-tab selected" data-value="tmall" name="购物">
                    购物
                  </li>
                  <li class="search-suggest-tabs-tab selected" data-value="shop" name="店铺">
                    店铺
                  </li>
                </ul>
              </div>

              <!--分隔符-->
              <i class="search-split"></i>
              <!--搜索按钮-->
              <div class="search-button" @click="searchNow()">
                <button class="btn-search gw-bg">搜索</button>
              </div>
              <div data-sg-type="combobox" class="search-suggest-combobox">
                <el-input v-model="searchKeyword" placeholder="请输入内容" id="q" name="q" autofocus="true"
                          type="text" accesskey="s" style="border: none;"></el-input>
              </div>

            </div>
            <!-- 搜索框下边的分类-->
            <div class="search-ft J_SearchFt clearfix">
              <div class="J_gwSearchContent J_HotWord">
                <div class="search-hots">
                  <div class="search-hots-lines">
                    <div class="search-hots-fline" data-spm-ab="fline">
                      <a href="/front/index.html">新款连衣裙</a>
                      <a href="/front/index.html">四件套</a>
                      <a href="/front/index.html">潮流T恤</a>
                      <a href="/front/index.html">时尚男鞋</a>
                      <a href="/front/index.html">短裤</a>
                      <a href="/front/index.html">半身裙</a>
                      <a href="/front/index.html">男士外套</a>
                      <a href="/front/index.html">墙纸</a>
                      <a href="/front/index.html">行车记录仪</a>
                      <a href="/front/index.html">新款男鞋</a>
                    </div>
                    <div class="search-hots-sline" data-spm-ab="sline"></div>
                  </div>
                </div>
              </div>
              <div class="J_TmallSearchContent J_HotWord J-TmallHotWord tmall-hot-word"
                   data-spm-ab="tmallHotWord"></div>
            </div>
          </div>
        </div>
        <!--二维码-->
        <div class="top-box-right">
          <div class="gwh-qr J_Module" data-name="qr" data-spm="201858" data-bucket="A">
            <div class="qr">
              <a href="/front/index.html" class="qr-bd" clearfix>
                <span id="mgw" class="h">下载购物</span>
                <img class="qrcode" src="/front/images/code.png" aria-labelledby="mgw">
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="cart-layout-gw">
    <div id="J_Cart" class="cart">
      <div id="J_FilterBar" class="cart-filter-bar">
        <span id="J_CartSwitch" class="switch-cart">购物车</span>
        <div class="cart-sum">
          <a style="float: right;margin-left: 10px;margin-top: 17px"
             class="submit-btn submit-btn-disabled" @click="clean()">清&nbsp;空</a>
          <a style="float: right;margin-left: 10px;margin-top: 17px"
             class="submit-btn submit-btn-disabled" @click="deleteList()">批量删除</a>
          <span class="pay-text">已选商品：</span>
          <strong class="price">
            <em id="J_SmallTotal"><span class="total-symbol">&nbsp;</span>{{nowPrice}}</em>
          </strong>
          <a id="J_SmallSubmit" class="submit-btn submit-btn-disabled" @click="settlement()" style="margin-top: 17px">结&nbsp;算</a>
        </div>
      </div>
    </div>
    <div id="J_CartMain app" class="cart-main">
      <el-table
              :data="cartData"
              style="width: 100%;text-align: center"
              @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                width="50">
        </el-table-column>
        <el-table-column
                prop="image"
                label="商品"
                width="300"
                align="center">
          <template slot-scope="{ row }">
            <a :href="'/front/page/goods_detail.html?id=' + row.goodsId">
              <img :src="baseurl+row.image" style="width: 100px"/>
            </a>
          </template>
        </el-table-column>
        <el-table-column
                prop="name"
                label="介绍"
                width="200"
                align="center">
        </el-table-column>
        <el-table-column
                prop="price"
                label="价格"
                width="100">
        </el-table-column>
        <el-table-column
                prop="amount"
                label="数量"
                width="300"
                align="center"
        >
          <template slot-scope="{ row }">
            <el-input-number v-model="row.amount" @change="handleChange(row.id)" :min="1" :max="100"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column
                label="删除"
                width="200"
                align="center"

        >
          <template slot-scope="scope">
            <el-button
                    type="text"
                    size="small"
                    class="delBut non"
                    @click="deleteHandle(scope.row.id)"
                    width="200"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <div class="J_SiteFooter" style="float: left;min-height: 150px">
    <div class="gw-footer gw-footer-with-logo">
      <div class="gw-footer-hd">
        <p>
                            <span>
                                <a>阿里巴巴集团</a>
                            </span>
          <b>|</b>
          <span>
                                <a>购物网</a>
                            </span>
          <b>|</b>
          <span>
                                <a>购物</a>
                            </span>
          <b>|</b>
          <span>
                                <a>聚划算</a>
                            </span>
          <b>|</b>
          <span>
                                <a>全球速卖通</a>
                            </span>
          <b>|</b>
          <span>
                                <a>阿里巴巴国际交易市场</a>
                            </span>
          <b>|</b>
          <span>
                                <a>1688</a>
                            </span>
          <b>|</b>
          <span>
                                <a>阿里妈妈</a>
                            </span>
          <b>|</b>
          <span>
                                <a>飞猪</a></span>
          <b>|</b>
          <span>
                                <a>阿里云计算</a>
                            </span>
          <b>|</b>
          <span>
                                <a>AliOS</a>
                            </span>
          <b>|</b>
          <span>
                                <a>阿里通信</a>
                            </span>
          <b>|</b>
          <span>
                                <a>一淘</a>
                            </span>
          <b>|</b>
          <span>
                                <a>万网</a>
                            </span>
          <b>|</b>
          <span>
                                <a>高德</a>
                            </span>
          <b>|</b>
          <span>
                                <a>UC</a>
                            </span>
          <b>|</b>
          <span>
                                <a>友盟</a>
                            </span>
          <b>|</b>
          <span>
                                <a>阿里安全</a>
                            </span>
          <b>|</b>
          <span>
                                <a>大麦网</a>
                            </span>
          <b>|</b>
          <span>
                                <a>钉钉</a>
                            </span>
          <b>|</b>
          <span>
                                <a>支付宝</a>
                            </span>
          <b>|</b>
          <span>
                                <a>优酷</a>
                            </span>
          <b>|</b>
          <span>
                                <a>土豆</a>
                            </span>
          <b>|</b>
          <span>
                                <a>阿里健康</a>
                            </span>
          <b>|</b>
          <span>
                                <a>阿里影业</a>
                            </span>
          <b>|</b>
          <span>
                                <a>网商银行</a>
                            </span>
          <b>|</b>
          <span>
                                <a>造点新货（众筹）</a>
                            </span>
          <b>|</b>
        </p>
      </div>
      <div class="gw-footer-bd">
        <p>
                            <span>
                                <a>关于购物</a>
                            </span>
          <span>
                                <a>营销中心</a>
                            </span>
          <span>
                                <a>廉正举报</a>
                            </span>
          <span>
                                <a>联系客服</a>
                            </span>
          <span>
                                <a>开放平台</a>
                            </span>
          <span>
                                <a>诚征英才</a>
                            </span><span>
                                <a>联系我们</a>
                            </span>
          <span>
                                <a>隐私权政策</a>
                            </span>
          <span>
                                <a>法律声明</a>
                            </span>
          <span>
                                <a>知识产权</a>
                            </span>
          <span>
                                <a>不当竞争举报</a>
                            </span>
          <b>|</b>
          <em>© 2003-现在 Taobao.com 版权所有</em>
        </p>
        <p>
          <span>增值电信业务经营许可证：浙B2-20080224</span>
          <b>|</b>
          <span>增值电信业务经营许可证（跨地区）： B2-20150210</span>
          <b>|</b>
          <span>浙网文【2022】0403-017号</span>
          <b>|</b>
          <span>浙江省网络食品销售第三方平台提供者备案：浙网食A33010001</span>
          <b>|</b>
          <br>
        </p>
        <p>
          <span>互联网药品信息服务资格证书（浙）-经营性-2018-0010</span>
          <b>|</b>
          <span>短消息类服务接入代码使用证书：号【2016】00154-A01</span>
          <b>|</b>
          <span>信息网络传播视听许可证：1109364号</span>
          <b>|</b>
          <span>出版物网络交易平台服务经营备案号：新出发浙备字第002号</span>
          <b>|</b>
        </p>
        <p>
                            <span>
                                <a>
                                    <span class="gw-footer-mod"
                                          style="background-position: -861px 0px; width: 20px; height: 20px;);">
                                    </span>浙公网安备 33010002000078号
                                </a>
                            </span>
          <b>|</b>
          <span>
                                <a>浙B2-20080224-1</a>
                            </span>
          <b>|</b>
          <span>广播电视节目制作经营许可证（浙）字第01012号</span>
          <b>|</b>
          <span>市场名称登记证：工商网市字3301004120号</span>
          <b>|</b>
          <span>医疗器械网络交易服务第三方平台备案：（浙）网械平台备字[2018]第00004号</span>
          <b>|</b>
          <span>
                                <a>互联网违法和不良信息举报电话：0571-81683755 jubao.gw@service.taobao.com</a>
                            </span>
          <b>|</b>
          <span>
                                <a>中国扫黄打非网</a>
                            </span>
          <b>|</b>
          <span>
                                <a>全国文化和旅游市场网上举报投诉处理系统</a>
                            </span>
          <b>|</b>
          <span>
                                <a>全国12315平台</a>
                            </span>
          <b>|</b>
          <span><a>浙江省互联网违法和不良信息举报中心</a></span>
          <b>|</b>
          <span>
                                <a>全网举报</a>
                            </span>
          <b>|</b><br>
        </p>
      </div>
      <div class="gw-footer-ft">
        <a href="" class="gw-footer-mod" style="width: 30px;background-position: 0 0;"></a>
      </div>
    </div>
  </div>
</div>

</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="/front/plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="/front/plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="/front/plugins/axios/axios.min.js"></script>
<script src="../js/request.js"></script>
<script src="../js/common.js"></script>
<script src="/front/api/cart.js"></script>
<script src="/front/api/order.js"></script>
<script src="/backend/api/user.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                cartData: [],
                baseurl: 'http://localhost:8080/front/images/goods/',
                userInfo: '',
                userId: '',
                checked: true,
                num: 1,
                multipleSelection: [],
                addresses: [],
                order: [],
                searchKeyword: '',
                nowAddress: '',
                dialogVisible: false,
                nowPrice: ''
            }
        },
        mounted: function () {
            if (window.localStorage.getItem("userInfo") == null)
                window.location.href = '/front/index.html'
            else {
                this.userInfo = window.localStorage.getItem("userInfo")
                this.userId = JSON.parse(this.userInfo).id
            }

            this.initData()
        },
        create() {
        },
        methods: {
            async initData() {
                const params = {
                    id: this.userId
                }
                await cartListApi(params).then(res => {
                    if (String(res.code) === '1') {
                        this.cartData = res.data
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })

            },
            async handleChange(id) {
                for (let i = 0; i < this.cartData.length; i++) {
                    // 获取当前对象
                    const item = this.cartData[i];
                    if (item.id === id) {
                        console.log(item)
                        await changeAmountApi(item).then(res => {
                            if (String(res.code) !== '1') {
                                this.$message.error(res.msg)
                                item.amount--
                            }
                        }).catch(err => {
                            this.$message.error('请求出错了：' + err)
                        })
                    }
                }
            },
            async deleteHandle(id) {
                const params = {
                    id: id
                }
                    await deleteOne(params).then(res => {
                        if (String(res.code) === '1') {
                            this.$message.success("删除成功！")
                        }
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
                    await this.initData()
                },
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                    this.nowPrice = 0
                    this.multipleSelection.forEach(item => {
                        this.nowPrice += item.price * item.amount
                    });
                    this.nowPrice = this.nowPrice.toFixed(2);
                },
                async settlement() {
                    await this.handleQueryAddress()
                    this.nowPrice = 0
                    for (let i = 0; i < this.multipleSelection.length; i++) {
                        const item = this.multipleSelection[i]
                        this.nowPrice += item.price * item.amount
                    }
                    this.nowPrice = this.nowPrice.toFixed(2);
                    this.dialogVisible = true

                },
                handleClose(done) {
                    this.order = []
                    this.dialogVisible = false
                },
                async handleQueryAddress() {
                    await queryAddressByUserId(this.userId).then(res => {
                        if (String(res.code) === '1') {
                            const addressArray = res.data;
                            this.addresses = addressArray.map(address => {
                                const [label, value] = [this.key, address];
                                this.key++;
                                return {label, value};
                            });
                        }
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
                },
                async buyNow() {

                    let nowPhone = JSON.parse(this.userInfo).phone;
                    if (nowPhone == null) {
                        this.$alert('用户尚未绑定手机号，请前往个人界面填写手机号！', '手机号绑定提示', {
                            confirmButtonText: '确定',
                            callback: () => {
                                window.location.href = '/front/page/personal.html';
                            }
                        });
                        return;
                    }
                    if (this.nowAddress === '') {
                        this.$message.error('请选择收货地址')
                        return
                    }

                    const ordersArray = this.multipleSelection.map(item => {
                        // 添加其他属性
                        item.address = this.nowAddress
                        item.consignee = JSON.parse(this.userInfo).username
                        item.phone = JSON.parse(this.userInfo).phone
                        // 返回带有新属性的元素
                        return item;
                    });

                    await buyNewList(ordersArray).then(res => {
                        if (String(res.code) === '1') {
                            this.$message.success("批量结算成功！")
                            for (let i = 0; i < this.multipleSelection.length; i++) {
                                const item = this.multipleSelection[i];
                                const params = {
                                    id: item.id
                                }
                                deleteOne(params).then(res => {
                                    if (String(res.code) === '1') {
                                        this.initData()
                                    }
                                }).catch(err => {
                                    this.$message.error('请求出错了：' + err)
                                })
                            }

                            this.dialogVisible = false
                        } else
                            this.$message.error(res.msg)
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })

                },
                async clean() {
                    this.$confirm('确认删除？')
                        .then(_ => {
                            const param = {
                                id: this.userId
                            }
                            clean(param).then(res => {
                                if (String(res.code) === '1') {
                                    this.initData()
                                    this.$message.success("清空购物车成功！")
                                }
                            }).catch(err => {
                                this.$message.error('请求出错了：' + err)
                            })
                        })
                        .catch(_ => {
                        });

                },
            async deleteList() {
                if (this.multipleSelection.length === 0) {
                    this.$message.error("请选择批量删除的物品！");
                    return;
                }
                this.multipleSelection.forEach(item => {
                    // 在这里使用 item 进行操作
                    this.deleteHandle(item.id)
                });
                await this.initData()
            },
            addNewAddress() {
                window.location.href = '/front/page/personal.html'
            },
            async searchNow() {
                window.location.href = '/front/page/search.html' + '?q=' + this.searchKeyword
            }

        }
        }
    )
</script>
</html>